<template>
  <div class="Table1">
    <!--顶部标题-->
    <div class="content-top">
      <span>统计</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/SandS/table">报表统计</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/SandS/rest">剩休查询</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/SandS/cwatable">考勤报表</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-content">
        <div class="default-tabs">
          <el-tabs
            v-model="activeName"
            type="card"
            mode="horizontal"
            @tab-click="loadData"
          >
            <el-tab-pane label="班次统计" name="1" />
            <!-- <el-tab-pane label="排班查询" name="2" /> -->
          </el-tabs>
          <div class="view-content">
            <div class="content-content-right">
              <!-- 班次统计 Statistics -->
              <div v-if="activeName == 1" class="statistics">
                <div class="content-head">
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">工号：</span>
                    <span class="span-input fl">
                      <el-input
                        v-model="Statistics.tableConfig.params.employeeNo"
                        clearable
                        placeholder="按班工号"
                      ></el-input>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">部门：</span>
                    <span class="span-input fl">
                      <el-select
                        v-model="Statistics.tableConfig.params.deptId"
                        clearable
                        placeholder="请选部门"
                        @change="departmentChange"
                      >
                        <el-option
                          v-for="item in deptIdOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">班次：</span>
                    <span class="span-input fl">
                      <el-select
                        v-model="Statistics.tableConfig.params.classId"
                        clearable
                        placeholder="请选班次"
                      >
                        <el-option
                          v-for="item in shiftsOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">日期：</span>
                    <span class="span-input fl">
                      <el-date-picker
                        v-model="Statistics.tableConfig.paramsTmp.date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </span>
                  </div>
                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button type="primary" @click="StatisticsSearch"
                        >查询</el-button
                      >
                    </span>
                  </div>
                  <div class="input-item fr">
                    <span class="span-input fl">
                      <el-button type="primary" @click="StatisticsExport"
                        >导出</el-button
                      >
                    </span>
                  </div>
                </div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :columns="Statistics.tableConfig.columns"
                    :url="Statistics.tableConfig.url"
                    :pparams="Statistics.tableConfig.pparams"
                    @tableBubbling="StatisticsTableBubbling"
                  ></Table>
                </div>
              </div>
              <!-- 排班查询 Search -->
              <div v-if="activeName == 2" class="search">
                <div class="content-table">
                  <Table
                    ref="Table"
                    :columns="Search.tableConfig.columns"
                    :url="Search.tableConfig.url"
                    :pparams="Search.tableConfig.pparams"
                    @tableBubbling="SearchTableBubbling"
                  ></Table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Table from '@/components/table.vue'
import Vmask from '@/components/vmask.vue'
import mixins from '@/const/mixins'
import {tempShifts} from '@/const/api'

export default {
  name: 'Table1',
  components: {
    Vmask,
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      activeName: '1',
      Statistics: {
        isLoad: false, // 是否加载过该容器的数据
        data5: [],
        tableConfig: {
          url: '/WorkShifts/selectEmpClass',
          columns: [
            {
              dataIndex: 'employeeNo',
              title: '工号',
            },
            {
              dataIndex: 'workName',
              title: '姓名',
            },
            {
              dataIndex: 'className',
              title: '班次',
            },
            {
              dataIndex: 'deptName',
              title: '部门',
            },
            {
              dataIndex: 'daySE',
              title: '排班日期',
            },
            {
              dataIndex: 'time',
              title: '排班时间',
            },
            {
              align: 'center',
              dataIndex: ['details'],
              title: '操作',
            },
          ],
          params: {
            deptId: null,
            classId: null,
            pageNum: 1,
            pageSize: 15,
          },
          pparams: {},
          paramsTmp: {
            date: null,
          },
        },
      },
      Search: {
        isLoad: false, // 是否加载过该容器的数据
        data5: [],
        tableConfig: {
          url: '',
          columns: [
            {
              dataIndex: 'typeName',
              title: '类型',
            },
            {
              dataIndex: 'workerName',
              title: '申请人',
            },
            {
              dataIndex: 'dateTimeStart',
              title: '开始时间',
            },
            {
              dataIndex: 'dateTimeEnd',
              title: '结束时间',
            },
            {
              dataIndex: 'reason',
              title: '换班原因',
            },
            {
              dataIndex: 'applyTime',
              title: '申请时间',
            },
            {
              type: 'meiju',
              dataIndex: 'auditStatus',
              title: '状态',
              meiju: {
                '0': '未审核',
                '1': '审核通过',
                '2': '审核驳回',
              },
            },
            {
              align: 'center',
              dataIndex: ['approval'],
              title: '操作',
            },
          ],
          params: {
            date: '',
            pageNum: 1,
            pageSize: 15,
          },
          pparams: {},
        },
      },
      mask: {
        title: '',
        showMask: false,
        form: [
          {
            title: '工号',
            width: '',
            type: 'text',
            name: 'employeeNo',
            value: '',
            default: '',
            placeholder: '请填写工号',
            disabled: true,
            required: true,
          },
          {
            title: '所在部门',
            width: '',
            type: 'text',
            name: 'deptName',
            value: '',
            default: '',
            placeholder: '请填写所在部门',
            disabled: true,
            required: true,
            rows: 3,
          },
          {
            title: '姓名',
            width: '',
            type: 'text',
            name: 'workName',
            value: '',
            default: '',
            placeholder: '请填写姓名',
            disabled: true,
            required: true,
            rows: 3,
          },
          {
            title: '班次',
            width: '',
            type: 'text',
            name: 'className',
            value: '',
            default: '',
            placeholder: '请填写班次',
            disabled: true,
            required: true,
            rows: 3,
          },
          {
            title: '排班时间',
            width: '',
            type: 'text',
            name: 'time',
            value: '',
            default: '',
            placeholder: '请填写排班时间',
            disabled: true,
            required: true,
            rows: 3,
          },
          {
            title: '备注',
            width: '',
            type: 'textarea',
            name: 'deptName',
            value: '',
            default: '',
            placeholder: '备注',
            disabled: true,
            required: true,
            rows: 3,
          },
        ],
        width: '28%',
        btnLoading: false,
      },
      containerArr: ['Statistics', 'Search'],
      allWorker: [],
      deptIdOptions: [],
      shiftsOptions: [],
    }
  },
  created() {
    window._this = this

    this.getDepartmentList(0) // 获取所有部门
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      // 根1据activeName加载对应tab数据
      let activeName = this.activeName
      let container = (this.container = this[
        this.containerArr[activeName * 1 - 1]
      ]) // 拿 tab con 进行操作

      let paramsTmp = this.container.tableConfig.paramsTmp
      let params = this.container.tableConfig.pparams
      params.dayStart = paramsTmp.date
        ? this.$utils.parseTime(paramsTmp.date[0], '{y}-{m}-{d}')
        : null
      params.dayEnd = paramsTmp.date
        ? this.$utils.parseTime(paramsTmp.date[1], '{y}-{m}-{d}')
        : null

      if (activeName == 1 && !this.container.isLoad) {
        // 我申请的
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      } else if (activeName == 2 && !this.container.isLoad) {
        // 我审批的
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      }
    },
    // 班次统计的查询
    async StatisticsSearch() {
      this.Statistics.isLoad = false
      this.Statistics.tableConfig.params.pageNum = 1
      this.Statistics.tableConfig.pparams = JSON.parse(
        JSON.stringify(this.Statistics.tableConfig.params),
      )
      this.loadData()
    },
    StatisticsTableBubbling(e) {
      console.log(e, 'StatisticsTableBubbling')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'details') {
        mask.showMask = true
        mask.title = '班次详细'
        this.$utils.maskForm(content, mask.form).then(res => {
          mask.form = res
        })
      }
    },
    SearchTableBubbling(e) {
      console.log(e, 'SearchTableBubbling')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
    },
    StatisticsExport() {
      let params = JSON.parse(JSON.stringify(this.container.tableConfig.params))
      let paramsTmp = this.container.tableConfig.paramsTmp
      let str = ''
      params.startDay = paramsTmp.date
        ? this.$utils.parseTime(paramsTmp.date[0], '{y}-{m}-{d}')
        : ''
      params.endDay = paramsTmp.date
        ? this.$utils.parseTime(paramsTmp.date[1], '{y}-{m}-{d}')
        : ''
      delete params.pageNum
      delete params.pageSize
      Object.keys(params).forEach((n1, i1) => {
        params[n1] && (str += n1 + '=' + params[n1] + '&')
      })
      this.$axios({
        url: tempShifts('exportEmpClass'),
        params: params,
        method: 'get',
        responseType: 'arraybuffer',
      }).then(res => {
        this.$utils.downBlob(res, '班次统计')
      })
    },
    FnMask(e) {
      console.log(e, 'e')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'cancel') {
        mask.showMask = false
      }
    },
    FnAdd() {
      this.mask.showMask = true
      this.mask.title = '添加类型'
    },
    FnDelete() {},
    departmentChange(e) {
      this.getShiftsList(e)
      this.container.tableConfig.pparams.classId = null
    },
  },
}
</script>

<style lang="less">
.Table1 {
  .content-content-right {
    min-height: calc(100vh - 60px - 50.8px - 60px);
  }

  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }

  .content-table {
    .table-item {
      height: 50px;
      border-bottom: 1px solid #c1c1c1;

      span {
        font-size: 15px;

        &:nth-child(2) {
          color: rgb(0, 102, 225);
        }

        &:last-child {
          font-size: 14px;
          color: rgb(97, 167, 224);
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .page {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}
</style>
